<template>
  <div class="polarBar" ref="polarBar">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
const toolarr = ['Unstart','Execute','Finished','Expired']
var that
  export default {
    name: "polarBar",
    mixins: [resize],
    props:{
      title:'',
      name: '',
      dataList: {},
      rend: false
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      that = this
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      rend(){
        this.initChart(true)  
      }
    },
    methods: {
      initChart(flag) {
        this.chart = echarts.init(this.$refs.polarBar)
        // console.log(this.chart)
        this.chart.setOption({
          polar: {
            radius: [36, '90%']
          },
          angleAxis: {
            max: 30,
            startAngle: 90,
            show: false
          },
          radiusAxis: {
            type: 'category',
            data: ['未开始', '进行中', '完成', '延期完成', '延期未完成'],
            show: false
          },
          tooltip: {},
          series: {
            type: 'bar',
            itemStyle: {
              color: function(params){
                var colorList = ['#409EFF','#E6A23C','#67C23A','#9966ff','#F56C6C'];
                return colorList[params.dataIndex]
              }
            },
            data: [this.dataList.Unstart.length,this.dataList.Execute.length,this.dataList.Finished.length,this.dataList.Dfinished.length,this.dataList.Expired.length],
            // data: [2, 1.2, 2.4, 3.6],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            },
            showBackground: true,
            backgroundStyle: {
              color: '#F0F3FF'
            }
          }
        })
        if(flag){
          this.chart.on('click',function(params){
            that.$emit('handleClick',{first:params.seriesName,second:toolarr[params.dataIndex]})
          })
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .polarBar {
    width: 100%;
    height: 300px;
  }
</style>
